<template>
    <div class="group">
        <h2>任务列表</h2>

        <!-- 当没有任务时显示 -->
        <p v-if="isHas">没有任务</p>

        <!-- 当有任务时显示 -->
        <ul v-else-if="!isHas">
            <li v-for="item in task" :key="item.id">
                <span :class="{ completed: item.isComplete, 'not-completed': !item.isComplete }">{{ item.name }}</span>
                <button @click="changeState(item)">切换状态</button>
            </li>
        </ul>
        <button @click="changeState2">切换没有任务显示</button>
        <p>已完成任务数：{{ count }}</p>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';

const isHas = ref(false)
// const isComplete = ref(false)
const count = ref(0)

interface ItaskList {
    id: number
    name: string
    isComplete: boolean
}

const task = ref<ItaskList[]>([
    {
        id: 1,
        name: '作业1',
        isComplete: false
    },
    {
        id: 2,
        name: '作业2',
        isComplete: false
    },
    {
        id: 3,
        name: '作业3',
        isComplete: false
    },
])

const changeState = (item: ItaskList) => {
    item.isComplete = !item.isComplete
    if (item.isComplete === true) {
        count.value++
    } else {
        count.value--
    }
}

const changeState2 = () => {
    if (task.value.map(item => item.isComplete === false)) {
        isHas.value = true
    }
}

</script>

<style lang="scss" scoped>
.group {
    border: 3px solid skyblue;
    margin: 10px;
    padding: 10px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 10px 0;
    padding: 5px;
    display: flex;
    justify-content: space-between;
}

.completed {
    color: green;
    text-decoration: line-through;
}

.not-completed {
    color: black;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}

button:hover {
    background-color: #0056b3;
}
</style>